<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手写签名版</title>
    <script src="../Scripts/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="../Scripts/bootstrap/js/jquery.min.js"></script>
    <script type="text/javascript" src="../Scripts/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../Scripts/QueryString.js" ></script>
    <script type="text/javascript" src="../Scripts/config.js" ></script>
    <script src="../Scripts/jq-signature.min.js" type="text/javascript"></script>
    <script src="../Scripts/jq-signature.js" type="text/javascript"></script>
    <!--
    1. 袁丽娜接手来解析该部分.李世峰做的第1版.
    2. 当MapAttr的字段类型为String类型，扩展控件类型为 UIContralType=8 .
    3. 用户点手写签名版的时候，就弹出来一个框，让其手写签名，确定后，就关闭.
    4. 弹窗可以使用easyUI窗口.
    -->
</head>
<body>
    <div class="htmleaf-container">
        <div class="row">
            <div class="col-xs-12" style="width:300px">
                <div class="js-signature" data-border="1px solid black" 
                    data-line-color="#bc0000" data-auto-fit="true">
                </div>
                <p>
                    <button id="clearBtn" class="btn btn-default" onclick="clearCanvas();">
                        清除</button>&nbsp;
                    <button id="saveBtn" class="btn btn-default" onclick="saveSignature();" disabled>
                        确定</button></p>
                <div id="signature">
                    <p>
                        <em></em>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).on('ready', function () {
            
            //if ($('.js-signature').length) {
            $('.js-signature').jqSignature();

            //  }
        });

        function clearCanvas() {
            $('#signature').html('<p><em></em></p>');
            $('.js-signature').eq(0).jqSignature('clearCanvas');
            $('#saveBtn').attr('disabled', true);
        }
        function saveSignature() {

            var pic = $('.js-signature').eq(0).jqSignature('getDataURL');
            pic = pic.replace(/^data:image\/(png|jpg);base64,/, "");
            var form = new FormData();
            form.append("imageData", pic);

            // Sending the image data to Server 

            $.ajax({
                type: 'POST',
                url: Handler + "?DoType=HandWriting_Save&WorkID=" + GetQueryString("WorkID") + "&OID=" + GetQueryString("OID") + "&FK_Node=" + GetQueryString("FK_Node"),
                data:form,
                processData: false,
                contentType: false,
                success: function (data) {
                    if (data.indexOf('err@') == 0) {
                        alert(data);
                        return;
                    }
                    alert("图片上传成功.");
                }
            });
        }

        $('.js-signature').eq(0).on('jq.signature.changed', function () {
            $('#saveBtn').attr('disabled', false);
        });

    </script>
</body>
</html>
